// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'partials/icons';
@use './button';
@use './layout';
@use './form_controls';
@use './utils';

%button-group-base {
  // Recommended structure:
  //
  // DIV
  //   LABEL
  //     INPUT[type="radio"]
  //     *.label-text
  //   LABEL
  //     INPUT[type="radio"]
  //     *.label-text
  //
  // It's also recommended to wrap the whole button group
  // in a <fieldset> with the appropriate <legend> to
  // more closely describe what the group is for.

  @extend %flex-row;
  --flex-gap: 0;

  position: relative;

  label {
    display: contents;
  }

  input[type='radio'] {
    // Make an invisible target that spans the width and height of the
    // parent <label> element. This helps with the positioning of the
    // error messages.
    appearance: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  input + * {
    @extend %button-base;
    flex: 1 0 auto;

    &::before {
      @extend %icon;
      @extend %icon-checkmark;
      visibility: hidden;
    }

    &::after {
      // NB: fake icon to balance the layout
      @extend %icon;
      content: ' ';
      width: 1ch;
    }
  }

  :focus-visible + * {
    @extend %default-focus-ring;
    z-index: 1;
  }

  :checked + * {
    @extend %button-alt-state;
    cursor: default;

    &::before {
      visibility: visible;
    }
  }

  :disabled + * {
    @extend %button-disabled-state;
  }
}

%button-group {
  @extend %button-group-base;
  align-items: center;

  label:not(:last-child) input + * {
    margin-right: -1px;
  }

  label:first-of-type input + * {
    @extend %button-rounded-left;
  }

  label:last-of-type input + * {
    @extend %button-rounded-right;
  }
}

%button-group-vertical {
  @extend %button-group-base;
  flex-direction: column;
  align-items: stretch;

  input + * {
    justify-content: space-between;
  }

  label:first-of-type input + * {
    @extend %button-rounded-top;
  }

  label:last-of-type input + * {
    @extend %button-rounded-bottom;
  }
}
